<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/*尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			min-width属性：最小宽度【√】    min-height属性：最小高度
			max-width属性：最大宽度 【√】  max-height属性：最大高度
			*/
		   div{
			   width: 80%;/*默认宽度*/
			   min-width: 500px;/*内容最小宽度时500px，不能改变*/
			   max-width: 600px;/*页面尺寸：最小是500px，最大600px，默认80%*/
			   /*定好最小跟最大宽高，pc：80%  300px
			                       移动：500~600宽度【页面不变】300px
								   自适应
			   */
			   height: 300px;
			   background: deeppink;
		   }
		   /*html结构    div--.container   内层div--.box  写lorem
		   css结构   .container样式：背景颜色#f0f0f0
		                            padding：20px
									文本居中；
					.box:背景颜色#4caf50;
					     文字改下颜色：白色
						 宽度：60%
						 宽度范围：500~600宽度【页面不变】
						 margin:auto;
		   */
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam libero corporis maiores at laudantium non laborum vero maxime ratione dicta velit, optio necessitatibus neque mollitia perferendis ex illo eos omnis?</div>
	</body>
</html>